<!-- 模块说明 -->
<template>
    <div>
        <div class="top">
            <div>
                <van-nav-bar title="个人设置" left-text="" left-arrow @click-left="onClickLeft" />
            </div>
        </div>
        <div class="center">
            <div class="color"></div>
            <div class="gongN same">
                <ul>
                    <li>
                        <div>
                            <span>ID</span>
                        </div>
                        <span class="s1">28364719 </span>
                    </li>
                    <li @click="showPopup">
                        <div>
                            <span>昵称</span>
                        </div>
                        <span class="s1">{{ username }} <van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <div>
                            <span>头像</span>
                        </div>
                        <span class="s1" style="display: flex;justify-content: space-between;align-items: center;">
                            <img src="https://img1.baidu.com/it/u=1273075546,211023118&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                alt="">
                            <van-icon name="arrow" />
                        </span>
                    </li>
                </ul>
            </div>
            <div class="color"></div>
            <div class="gongN same">
                <ul>
                    <li >
                        <div>
                            <span>登陆手机</span>
                        </div>
                        <span class="s1">17884186276 <van-icon name="arrow" /></span>
                    </li>
                    <li>
                        <div>
                            <span>学校</span>
                        </div>
                        <span class="s1">清华大学 <van-icon name="arrow" /></span>
                    </li>
                    <li @click="showPopup2">
                        <div>
                            <span>修改密码</span>
                        </div>
                        <span class="s1">
                            <van-icon name="arrow" />
                        </span>
                    </li>

                </ul>
            </div>
            <div class="color"></div>
            <div class="gongN same">
                <ul>
                    <li>
                        <div>
                            <span>收货地址</span>
                        </div>
                        <span class="s1"><van-icon name="arrow" /></span>
                    </li>
                </ul>
            </div>
        </div>
        <van-popup v-model:show="show">
            <van-form @submit="onSubmitUsername">
                <van-cell-group inset>
                    <van-field v-model="username" name="昵称" label="昵称" placeholder="输入昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button color="#ccad74" round block type="primary" native-type="submit">
                        确认修改
                    </van-button>
                </div>
            </van-form>
        </van-popup>

        
        <van-popup v-model:show="show2">
            <van-form @submit="onSubmitPassword">
                <van-cell-group inset>
                    <van-field v-model="oldPassword" type="oldPassword" name="原密码" label="原密码" placeholder="原密码"
                        :rules="[{ required: true, message: '请填写原密码' }]" />
                    <van-field v-model="newPassword" type="newPassword" name="新密码" label="新密码" placeholder="新密码"
                        :rules="[{ required: true, message: '请填写新密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round color="#ccad74" block type="primary" native-type="submit">
                        确认修改
                    </van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const show2 = ref(false);
const showPopup2 = () => {
    show2.value = true;
};
const router = useRouter()
const onClickLeft = () => history.back();

const username = ref('');
const oldPassword = ref('');
const newPassword = ref('');

const onSubmitUsername = (values) => {
    console.log('onSubmitUsername', values);
    show.value = false;
};
const onSubmitPassword = (values) => {
    console.log('onSubmitPassword', values);
    show2.value = false;
};



</script>
<style lang="scss" scoped>
.top {
    height: 7vh;
    // border-bottom: 1px solid red;
}

.center {
    .color {
        height: 15px;
        background-color: #f1f1f1;
    }

    .gongN {
        margin-top: 10px;
        overflow: hidden;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #e1e1e1;

            img {
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }

            .s1 {
                color: #a1a1a1;
            }
        }

    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
</style>
